<template>
    <div id="">
        <form id="Userform" onsubmit="return false">
            <div>
                <label for="username">用户名：</label>
                <input type="text" id="username" v-model="user.name">
            </div>
            <div>
                <label for="password">密码：</label>
                <input type="text" id="password" v-model="user.psw">
            </div>
            <button @click="register">注册</button>
        </form>
    </div>
</template>

 <script setup lang="ts">
import { reactive } from 'vue'
type userData = {
    name: string,
    psw: string
}
const user = reactive<userData>({
    name: '',
    psw: ''
})

const register = () => {
    console.log(user);
}

</script>

<style lang="less" scoped>
#Userform {
    width: 300px;
    height: 100px;
    background-color: rgb(0, 119, 255);
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;

    div {
        text-align: right;
        width: 250px;
    }

    button {
        width: 120px;
        height: 30px;
        background-color: aqua;
    }
}
</style>